<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer" />
    <title>无人机飞行路线可视化</title>
    <style>
        body {
            position: absolute;
            margin: 0;
            width: 100%;
            height: 100%;
        }

        #mapContainer {
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            float: left;
        }
    </style>
</head>

<body>
    <div id="mapContainer" style="position: relative;"></div>
</body>
<script src='/GiswayEngine.js'></script>
<script type="text/javascript">
    var cameraFov = 10; //相机视角
    window.app = new GE.App('mapContainer', {
        geographySystem: 'gcj02',
        cameraFov: cameraFov, //相机的fov
        position: [120.170646, 30.28362, 2000], //相机的位置
        lookAt: [120.170646, 30.28362, 0], //相机看向的地图位置
        cameraScrollSpeed: 5, //鼠标滚动时，控制相机移动的速度
        maxSlopeAngle: 70,
        minZoom: 3, //允许地图的最小层级
        maxZoom: 21, //允许地图的最大层级
        ambientLightIntensity: 5,
        useDefaultTexture: true, //是否使用瓦片默认纹理
        background: "Fog", //背景的类型，参数有如下类型：None, Fog, Color, Gradient, Image, Sky, Image。使用Fog地图的性能会比较好
        isOpenCircleRange: true, //开启圆形范围可视化
        baseLayer: [
            //影像底图
            {
                url: 'https://webst03.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',//影像底图的url
                urlDecimal: true, //影像底图url中的瓦片行列号是否是十进制，true表示十进制，false表示十六进制
                tileType: 'image', //影像底图
                canNotSelect: false, //true表示该图层不参与射线拾取，false表示图层参与射线拾取
                colorSpace: 'srgb',
            }
        ]
    });



    var loadedModelCount = 0;
    var isHasdAircraftModel = false; //加载无人机模型是否成功
    var aircraftModel; //无人机模型
    function loadFbx(modelUrl, scale, isComputeBox) {
        var model = new GE.OverLay({
            type: 'fbx',
            url: modelUrl,
            scale: [scale, scale, scale],
            actionTimeScale: 10,
            isComputeBox: isComputeBox, //计算各个瓦片的包围盒
            success: function (modelScene) {
                loadedModelCount++;
                if (loadedModelCount >= 2) {
                    isHasdAircraftModel = true;

                    const boundingBox = new GE.three.Box3();
                    // 递归计算对象A及其所有子对象的包围盒
                    boundingBox.setFromObject(aircraftModel);

                    // 获取包围盒尺寸
                    const size = new GE.three.Vector3();
                    boundingBox.getSize(size);

                    let maxSize = Math.max(size.x, size.y, size.z);
                    let targetSize = 2;
                    let scaleFactor = targetSize / maxSize;
                    // aircraftModel.scale.set(scaleFactor, scaleFactor, scaleFactor);
                }
            }
        });
        return model;
    }

    function loadAircraftModel() {
        aircraftModel = loadFbx('/examples/resources/fbx/wurenji3.fbx', 1, false);
        aircraftModel.up.x = 0; aircraftModel.up.y = 0; aircraftModel.up.z = 1;  //提供模型的朝向信息，不然模型移动的时候可能会出现朝向错误
        aircraftModel.renderOrder = 4;
        app.add(aircraftModel);

        var directionModel = loadFbx('/examples/resources/fbx/direction1.fbx', 0.2, false);
        directionModel.position.y += 10;
        directionModel.position.z += 55;
        directionModel.rotateX(-Math.PI / 2);
        aircraftModel.add(directionModel);

        let SphereGeometry = new GE.three.SphereGeometry(120)
        let sphereMaterial = new GE.three.MeshBasicMaterial({ color: '#0000FF', transparent: true, opacity: 0.2 })
        let sphere = new GE.three.Mesh(SphereGeometry, sphereMaterial)
        sphere.renderOrder = 5;
        aircraftModel.add(sphere);
    }
    loadAircraftModel(); //加载无人机模型




    var pathPolyline; //规划的无人机路线组件
    var flyedPolyline; //无人机真正飞过的路线组件
    var lineWidth = 10; //路线组件的宽度
    function addFlyPath(path) {//添加轨迹线
        let stencilRef = 5;
        let flyedLineData = {
            maxPoints: 2,
            // pointArray: path,  //多边形的顶点数组
            color: '#F0A032',
            lineWidth: lineWidth,  //线的宽度
            transparent: true,
            opacity: 1,
            depthTest: true,
            stencilRef: stencilRef
        };
        flyedPolyline = new GE.Polyline2(flyedLineData);
        flyedPolyline.renderOrder = 1;
        window.app.add(flyedPolyline);

        let pathLineData = {
            pointArray: path,  //多边形的顶点数组
            color: '#0472FE',
            lineWidth: lineWidth,  //线的宽度
            transparent: true,
            opacity: 1,
            depthTest: true,
        };
        pathPolyline = new GE.Polyline(pathLineData);
        pathPolyline.renderOrder = 2;
        pathPolyline.filterStencil(stencilRef);
        window.app.add(pathPolyline);


        let routeArrow = new GE.RouteArrow({ pointArray: path, narrorColor: "#ffffff", narrowCountFactor: 1, stencilRef: stencilRef });



        const endPOI = new GE.Poi2({
            position: path[path.length - 1],
            name: '',
            baseImageSize: 400,
            showText: false,
            center: [0.5, 0],
            depthTest: true,
            defaultShape: 'square',
            shapeSize: 2.5,
            shapeColor: '#FF6B6B',
            shapeStrokeWidth: 0,
        });
        endPOI.updateTextLayout('image-only');
        // 加载纹理图片 - 直接传入URL字符串
        endPOI.updateShapeTexture('../assets/img/ed.png');
        endPOI.renderOrder = 6;
        endPOI.position.z += 1;
        app.add(endPOI);
    }

    let pointArray = [ //3857表示web墨卡托坐标系，4326表示经纬度坐标
        new GE.Point(120.170646, 30.28362, 20, '4326'),
        new GE.Point(120.175646, 30.28362, 20, '4326'),
        new GE.Point(120.175646, 30.28662, 20, '4326'),
        // new GE.Point(120.175346, 30.28662, 20, '4326'),
        // new GE.Point(120.176346, 30.28362, 20, '4326'),
    ];
    addFlyPath(pointArray);




    function flyAircraft(x, y, z) { //无人机模型飞到指定的位置
        var tempPosition = new GE.Point(x, y, z, "gcj02").toGeography();
        tempPosition.toEPSGWeb();
        aircraftModel.position.copy(tempPosition);

        let flyedPath = flyedPolyline.getPointArray();
        let lookTarget;
        if (flyedPath.length > 0) {
            let directionVector = tempPosition.clone().toEPSGWeb().sub(flyedPath[flyedPath.length - 1].clone().toEPSGWeb()).multiplyScalar(10);
            lookTarget = flyedPath[flyedPath.length - 1].clone().toEPSGWeb().add(directionVector);
        } else {
            lookTarget = pointArray[1].clone().toEPSGWeb();
        }
        aircraftModel.lookAt(lookTarget);
        flyedPolyline.addPoint(tempPosition);
    }

    window.app.on('Click', function (e) {
        if (isHasdAircraftModel == false) { //无人机模型还没有加载成功
            return;
        }
        flyAircraft(e.lnglat.x, e.lnglat.y, 20);
    });






    var circleCenter = new GE.Point(120.170646, 30.28362, 20, '4326'); //0
    var circleRadius = 700;
    let iconUrl = '/examples/resources/image/airportBox.png'
    var rangeCircle = new GE.CircleRange({ name: 'CS001虚拟机场综管', iconUrl: iconUrl, nameColor: '#FFFAFA', nameLabelColor: '#016CF7', circelCenter: circleCenter, circleRadius: circleRadius, circleBorderWidth: 10, circleRangeColor: '#00FA9A', circleBorderColor: '#0000FF', circleRangeMix: 0.2 });
    rangeCircle.openRange();
</script>

</html>